<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>
      {{message}}
      <button @click="handleArray">操作数组</button>
      <h1>{{obj.a.b.c}}</h1>
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
   
  </div>
  <!-- 
    vue2的缺点 : 

   -->
  <script src="./js/vue2.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        obj:{a:{b:{c:10}}},
        list:[
          '西红柿',
          '羊肉',
          '蛋糕',
          '吓',
        ]
      },
      methods:{
        handleArray(){
          // console.log('111')
          /*
              当操作数组 不是下面几个方法的时候 数据驱动视图 无效
              'push',
              'pop',
              'shift',
              'unshift',
              'splice',
              'sort',
              'reverse'
              */
          // this.list[1] = '牛肉';
          // this.$set(this.list,1,'牛肉');
          // 不会影响对象 只对数组有缺陷
          this.obj.a.b.c = 20
        }
      }
    })
  </script>
  <script>
    let obj = {};
    obj.a = 1
    obj.b = 2
    obj.c = 3
    // 存取描述符 拦截 setter getter 
    // 数据描述符 限制 value writable configurable enumerable
    // Object.defineProperty(obj,'a',{
    //   value:1,
    //   writable:true, // 值是否可以被改变
    //   configurable:true,
    //   enumerable:false // 枚举 一个一个举例 遍历无效
    // });
    // 存取描述 : 拦截

    let value = ''
    Object.defineProperty(obj,'a',{
      get(){ // 获取
        console.log('get');
        // 发布订阅 通知视图 
        return value
      },
      set(newValue){ // 设置
        value = newValue
      }
    });


    obj.a = 10
    console.log(obj.a)
    // for (const key in obj) {
    //   console.log(key,obj[key])
    // }

    function interceptor(obj){
      // 将obj的每个属性都能拦截=-
      if(typeof obj!=='object' || obj === null){
        return 
      }
      for(let key in obj){
        if(Object.prototype.hasOwnProperty.call(obj,key)){
          observer(obj,key);
        }
      }
    }

    // 监听不到数组
    function observer(obj,key){
        let value  = obj[key]
        Object.defineProperty(obj,key,{
        get(){ // 获取
          console.log('读取属性',value);
          // 发布订阅 通知视图 
          return value
        },
        set(newValue){ // 设置
          console.log('设置属性',newValue)
          value = newValue
        }
      });
    }

    let arr = [1,2,3]
    interceptor(arr)
    obj[0]= 333
    console.log(obj[0])
  </script>
</body>
</html>